<template>
	<scroll-view style="height: 100%;" scroll-y="true">
		<view class="feedback-form feedback-type" style="margin: 0px 30px;">
			<uni-forms>
				<uni-forms-item>
					<view class="label">
						<image src="https://zhzx.on-line-demo.com/image/fkbt.png" mode="heightFix" style="width: 16px;height: 16px;margin-right: 10px;"></image>
						反馈类型：
					</view>
					<radio-group @change="radioChange" class="radio-group">
						<label class="radio" v-for="(item, index) in types" :key="item.value">
							<radio :value="item.value" :checked="formData.type == item.value" />{{item.text}}
						</label>
					</radio-group>
				</uni-forms-item>
				<uni-forms-item >
					<view class="label">
						<image src="https://zhzx.on-line-demo.com/image/fkbt.png" mode="heightFix" style="width: 16px;height: 16px;;margin-right: 10px;"></image>
						反馈标题：
					</view>
					<view class="title">
						<uni-easyinput type="textarea" maxlength="-1" autoHeight v-model="formData.title" :clearable="false" placeholder="请输入" />
					</view>
				</uni-forms-item>
				<uni-forms-item >
					<view class="label">
						<image src="https://zhzx.on-line-demo.com/image/xxsm.png" mode="heightFix" style="width: 16px;height: 16px;margin-right: 10px;"></image>
						详细说明：
					</view>
					<uni-easyinput class="content" type="textarea" maxlength="-1" autoHeight v-model="formData.content" placeholder="请输入"></uni-easyinput>
				</uni-forms-item>
			</uni-forms>
			<button type="primary" class="btn delete" @click="onSubmit()">提交反馈</button>
		</view>
	</scroll-view>
</template>

<script>
	import request from '../../common/request.js'
	export default {
		props:['id'],
		data() {
			return {
				formData:{
					title:'',
					content: '',
					type: 1
				},
				timeout: null,
				types: [{
					text: '一般意见',
					value: 1
				}, {
					text: '企业家问题诉求',
					value: 2
				}],
			}
		},
		beforeDestroy() {
			if(this.timeout){
				clearTimeout(this.timeout)
			}
		},
		mounted(){
			if(this.id){
				this.getDetailData()
			}
		},
		methods: {
			getDetailData(){
				request({
					url:'/feedback/detail',
					data:{
						opinions_id: this.id
					},
					method: 'POST'
				}).then(res => {
					if(res.code == 1){
						this.formData = res.data
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			radioChange(res) {
				this.formData.type = res.detail.value
			},
			onSubmit(){
				if(!this.formData.title){
					uni.showToast({
						title: '标题不能为空',
						icon: 'none',
						duration: 2000
					});
					return false
				}
				if(!this.formData.content){
					uni.showToast({
						title: '详细说明不能为空',
						icon: 'none',
						duration: 2000
					});
					return false
				}
				if(this.id){
					let param = {
						opinions_id: this.id,
						title: this.formData.title,
						content: this.formData.content
					}
					request({
						url:'/feedback/editOpinion',
						data: param,
						method: 'POST'
					}).then(res => {
						if(res.code == 1){
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
							this.timeout = setTimeout(() => {
								let data = {
									page: 'form'
								}
								uni.$emit('showContent', data)
							}, 2000)
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}else{
					request({
						url:'/feedback/addOpinion',
						data:this.formData,
						method: 'POST'
					}).then(res => {
						if(res.code == 1){
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
							this.timeout = setTimeout(() => {
								let data = {
									page: 'form'
								}
								uni.$emit('showContent', data)
							}, 2000)
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.feedback-form{
		padding: 30px 0px 20px;
	}
	.label{
		font-size: 16px;
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}
	
	.btn{
		margin-bottom: 15px;
		font-size: 14px;
		padding: 5px;
		border-radius: 8px;
	}
	.btn.delete{
		background-color: #ea5c55;
		margin-top: 60px;
	}
	.radio-group{
		margin-bottom: 10px;
	}
	.radio-group .radio:first-child{
		margin-right: 20px;
	}
</style>